<!doctype html>
<html lang="`en`">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web-Tools</title>
</head>
<body>

<div id="loader" class="loader" hidden="hidden">
    <p></p>
</div>

<div id="default-editor-page__placeholder" class="panel">
    <div class="big-title">
        <span>iOS/Android Localizable Parser</span>
    </div>

    <div class="description">
        <a href="http://119.29.167.187:8080/download/template">下载模版</a>
    </div>

    <div>
        参考文件(zh-Hans)：<input type="file" name="refFile" id="refFile" accept="application/msexcel"/>
        <br/>
        Excel文件：<input type="file" name="fileInput" id="fileInput" accept="application/msexcel"/>
        <div style="">
            <button id="upload_ios" style="float: left" class="ios_btn" onclick="upload(1)">iOS 上传解析</button>
            <button id="upload_android" style="float: right" class="android_btn" onclick="upload(2)">Android 上传解析
            </button>
        </div>
    </div>

    <div class="welcome-img"></div>
</div>

<div class="wechat-group">
    <a href="https://gitee.com/tzj2015/web-tools">Source Code</a>
</div>
</body>

<script>

    function upload(type) {
        const refFile = document.getElementById('refFile')
        const fileInput = document.getElementById('fileInput')
        if (fileInput.files === null || fileInput.files.length === 0) {
            alert("请上传文件")
            return
        }

        let typeName = type === 1 ? "-ios" : "-android"

        const loader = document.getElementById("loader")
        loader.hidden = false

        const upload_ios = document.getElementById("upload_ios")
        upload_ios.disabled = true

        const upload_android = document.getElementById("upload_android")
        upload_android.disabled = true

        const fd = new FormData()
        fd.append('file', fileInput.files[0])
        fd.append('refFile', refFile.files[0])

        fetch('http://119.29.167.187:8080/upload/' + type, {
            method: 'POST',
            body: fd
        })
            .then(response => {
                loader.hidden = true
                upload_ios.disabled = false
                upload_android.disabled = false
                let disposition = response.headers.get("Content-Disposition");
                var filename = disposition.substring(disposition.indexOf("filename=") + "filename=".length)
                if (filename.trim().length === 0) {
                    let name = fileInput.files[0].name
                    filename = name.substring(0, name.lastIndexOf(".")) + typeName + ".zip"
                }
                response.blob()
                    .then(data => {
                        const blobUrl = window.URL.createObjectURL(data);
                        const a = document.createElement('a');
                        a.download = filename;
                        a.href = blobUrl;
                        a.click();
                    })
            }).catch(() => {
            loader.hidden = true
            upload_ios.disabled = false
            upload_android.disabled = false
        })
    }
</script>

<style>
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }

    * {
        box-sizing: border-box;
    }

    body {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Roboto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Jhenghei", sans-serif;
    }

    .panel {
        width: 90%;
        max-width: 700px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;
        padding-top: 30px;
        padding-right: 50px;
        padding-bottom: 30px;
        padding-left: 50px;
        margin-top: 50px;
        margin-right: auto;
        margin-left: auto;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-style: dashed;
        border-right-style: dashed;
        border-bottom-style: dashed;
        border-left-style: dashed;
        border-top-color: rgb(204, 204, 204);
        border-right-color: rgb(204, 204, 204);
        border-bottom-color: rgb(204, 204, 204);
        border-left-color: rgb(204, 204, 204);
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
        margin-bottom: 40px;
        color: rgb(51, 51, 51);
        font-weight: 100;
    }

    .logo path {
        pointer-events: none;
        fill: none;
        stroke-linecap: round;
        stroke-width: 7;
        stroke: rgb(255, 255, 255);
    }

    .big-title {
        text-align: center;
        font-size: 3rem;
        margin-top: 26px;
        margin-right: 0px;
        margin-bottom: 26px;
        margin-left: 0px;
        color: rgb(24, 144, 255);
    }

    .description {
        text-align: center;
        font-size: 1rem;
        line-height: 1.8rem;
        margin-bottom: 1rem;
        margin-top: 2rem;
    }

    .wechat-group {
        text-align: center;
        /*float: bottom;*/
        /*margin-bottom: 20px;*/
        padding-bottom: 20px;
    }

    .wechat-group img {
        max-width: 220px;
        height: auto;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        width: 100%;
    }

    .welcome-img {
        padding-top: 20px;
        padding-right: 0px;
        padding-bottom: 20px;
        padding-left: 0px;
        text-align: center;
    }

    .welcome-img img {
        width: 100%;
        max-width: 280px;
    }

    .c2157 {
        padding: 10px;
    }

    @media (max-width: 767.98px) {
        .big-title {
            font-size: 1.9rem;
        }
    }

    input[type=file], select {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .ios_btn {
        background-color: rgb(24, 144, 255);
    }

    .android_btn {
        background-color: rgb(149, 236, 105);
    }

    button {
        width: 45%;
        background-color: rgb(24, 144, 255);
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    /*button:hover {*/
    /*    background-color: rgb(24, 144, 255);*/
    /*}*/

    .loader {
        width: 100px;
        height: 101px;
        border: 8px solid;
        border-top-color: hsl(154, 100%, 31%);
        border-left-color: hsl(216, 87%, 52%);
        border-bottom-color: hsl(8, 66%, 50%);
        border-right-color: hsl(42, 100%, 51%);
        border-radius: 50%;
        transform: rotate(45deg);
        margin: 30px auto;
    }

    p {
        display: inline-block;
        width: 107px;
        height: 107px;
        /* The background is used to specify the border background */
        background: linear-gradient(90deg, hsla(212, 67%, 36%, 0) 0%,
        hsla(207, 69%, 51%, 0) 76%,
        hsla(0, 0%, 100%, 1) 85%,
        hsla(0, 0%, 100%, 1) 100%); /* W3C */
        /* Background origin is the padding box by default.
        Override to make the background cover the border as well. */
        -moz-background-origin: border;
        background-origin: border-box;
        /* A transparent border determines the width */
        border: 6px solid transparent;
        border-radius: 50%;
        box-shadow: inset -999px 0 0 #fff; /* The background color */
        transform: translate(-8px, 55px);
        animation: loading 1s linear infinite;
    }

    @keyframes loading {
        0% {
            transform: translate(-9px, -25px) rotate(0deg);
        }
        100% {
            transform: translate(-9px, -25px) rotate(360deg);
        }
    }
</style>
</html>